<template>
  <div class="z-table">
    <el-table
      ref="tabel"
      v-bind="$attrs"
      :data="tableData"
      size="small"
      style="width:100%;"
      v-on="$listeners"
    >
      <el-table-column
        v-if="isShowIndexCol"
        align="center"
        label="编号"
        type="index"
        width="50"
      />
      <el-table-column
        v-if="isShowCheck"
        :is-show-check="isShowCheck"
        align="center"
        :selectable="selectable"
        type="selection"
        width="55"
      />
      <template v-for="(column, idx) in tableFormat">
        <el-table-column
          v-if="!column.hidden"
          :key="idx"
          :align="column.align||'center'"
          :prop="column.prop"
          :header-align="column.headerAlign"
          :show-overflow-tooltip="column.showTooltip != null ? column.showTooltip: true"
          :label="column.label"
          :min-width="column.minWidth"
          :width="column.width"
          v-bind="column.other"
        >
          <!-- slot -->
          <template v-if="column.template==='slot'" #default="{row,column:col}">
            <slot :name="column.slotName" :row="row" :column="col" />
          </template>
          <!-- 1or0 -->
          <template v-else-if="column.template==='statusStr'" #default="{row, column:col}">
            <span>{{ typeof column.strObj[row[col.property]] === 'function' ? column.strObj[row[col.property]](row): (column.strObj[row[col.property]]||row[col.property]) }}</span>
          </template>
          <!-- time -->
          <template v-else-if="column.template==='time'" #default="{row,column:col}">
            <span>{{ row[col.property]|dateFormat(column.timeFormat) }}</span>
          </template>
          <!-- html -->
          <template v-else-if="column.template==='html'" #default="{row,column:col}">
            <span v-html="row[col.property]" />
          </template>
          <!-- function -->
          <template v-else-if="column.template==='function'" #default="{row,column:col}">
            <span>{{ typeof column.fn === 'function' ? column.fn(row, col): '' }}</span>
          </template>
          <!-- 默认 -->
          <template v-else #default="{row,column:col}">
            <svg-icon v-if="column.svg" :icon-class="column.svg" classs="table-item-icon" />
            <i v-if="column.iconfont" :class="column.iconfont" classs="table-item-icon" />
            <span>{{ column.prefix }}{{ row[col.property] }}{{ column.suffix }}</span>
          </template>
        </el-table-column>
      </template>
      <!-- 操作 -->
      <el-table-column
        v-if="isShowOpions"
        :label="optionsLabel"
        header-align="center"
        align="center"
        fixed="right"
        class="options-col"
        :width="optionsWidth"
      >
        <template #default="{row, column}">
          <slot name="options" :row="row" :column="column" />
        </template>
      </el-table-column>
    </el-table>
    <div v-if="isShowPagination" class="pagination flex-align-center">
      <el-pagination
        v-if="isShowPagination"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="paginationObj.page_size"
        :current-page="paginationObj.page_num"
        :page-sizes="[10, 20, 30, 40, 50, 80, 100]"
        :total="paginationObj.total"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  filters: {
    dateFormat(v, format = 'YYYY-MM-DD HH:mm:ss') {
      try {
        if (!v) return v
        return dayjs(new Date(v)).format(format)
      } catch (error) {
        return v
      }
    }
  },
  inheritAttrs: false,
  props: {
    tableData: { // table数据
      type: Array,
      required: true
    },
    /**
         * prop：必需
         * label：必需
         * template: 决定column的种类
         * width：宽度
         */
    tableFormat: { // table格式
      type: Array,
      required: true
    },
    isShowIndexCol: { // 是否显示编号列
      type: Boolean,
      default: false
    },
    isShowOpions: { // 是否显示操作列
      type: Boolean,
      default: true
    },
    optionsLabel: { // 操作的label
      type: String,
      default: '操作'
    },
    optionsWidth: { // 操作的宽度
      type: [String, Number],
      default: '160'
    },
    isDisableAllCheck: { // 禁止全选
      type: Boolean,
      default: false
    },
    isShowCheck: { // 是否显示多选
      type: Boolean,
      default: false
    },
    // eslint-disable-next-line vue/require-default-prop
    selectable: { // 决定是否可以勾选，函数接受row和index作为参数
      type: Function
    },
    isShowPagination: { // 是否显示分页
      type: Boolean,
      default: false
    },
    paginationObj: { // 对象必须包含total, page_size、page_num参数
      type: Object,
      default() {
        return {
          total: 0,
          page_size: 10,
          page_num: 1
        }
      },
      validator(v) {
        if (v === null) throw Error('传参错误，不能为null，需传入对象')
        const keys = Object.keys(v)
        return ['total', 'page_size', 'page_num'].every(key => keys.includes(key))
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.isShowCheck && this.isDisableAllCheck) {
        document.querySelector('.el-table__header-wrapper .el-table-column--selection .el-checkbox').style.display = 'none'
      }
    })
  },
  methods: {
    toggleSelection(...arg) {
      this.tableData.forEach(row => {
        this.$refs.tabel.toggleRowSelection(row, ...arg)
      })
    },
    toggleRowSelection(...arg) {
      this.$refs.tabel.toggleRowSelection(...arg)
    },
    clearSelection() {
      this.$refs.tabel.clearSelection()
    },
    sizeChange(page) {
      this.$emit('sizeChange', page)
    },
    currentChange(page) {
      this.$emit('currentChange', page)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .el-table__header th{
    background-color: #efefef;
    color: #282828;
}
.pagination {
  justify-content: flex-end;
  padding: 16px 0px;
}
.flex-align-center {
    display: flex;
    align-items: c;
}
</style>
